<template>
  <div class="container">
    <!-- 搜索框 -->
    <el-input
      v-model="searchText"
      placeholder="输入搜索文本"
      clearable
      style="width: 200px; margin-bottom: 10px;"
    />

    <!-- 表格 -->
    <el-table
      :data="filteredTableData"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @sort-change="handleSortChange"
    >
      <!-- 动态表头 -->
      <el-table-column
        v-for="column in tableColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :sortable="column.sortable"
      >
        <!-- 自定义列内容（如果需要） -->
        <template v-if="column.prop === 'name'" #default="{ row }">
          <span>{{ row.name }}</span>
        </template>
        <!-- 其他自定义内容可以在这里添加 -->
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button type="primary" size="mini" @click="editRow(row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器（可选） -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 10px; text-align: right;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      searchText: '',
      tableData: [
        { id: 1, name: '电机速度标准差最大值', value: '1.16', range: '小于10', filename: 'HKD01_5208_B_ERME_EVT_20221102149658_V10_49', timestamp: '2022/11/02 23:36:49' },
        { id: 2, name: '电机速度标准差最大值', value: '1.16', range: '小于10', filename: 'HKD01_5208_B_ERME_EVT_20221102149658_V10_49', timestamp: '2022/11/02 23:36:49' },
        { id: 3, name: '电机速度标准差最大值', value: '11.16', range: '小于10', filename: 'HKD01_5208_B_ERME_EVT_20221102149658_V10_49', timestamp: '2022/11/02 23:36:49' },
        { id: 4, name: '电机速度标准差最大值', value: '1.16', range: '小于10', filename: 'HKD01_5208_B_ERME_EVT_20221102149658_V10_49', timestamp: '2022/11/02 23:36:49' },
        { id: 5, name: '电机速度标准差最大值', value: '1.16', range: '小于10', filename: 'HKD01_5208_B_ERME_EVT_20221102149658_V10_49', timestamp: '2022/11/02 23:36:49' },
        { id: 6, name: '电机速度标准差最大值', value: '12.16', range: '小于10', filename: 'HKD01_5208_B_ERME_EVT_20221102149658_V10_49', timestamp: '2022/11/02 23:36:49' },
        { id: 7, name: '电机速度标准差最大值', value: '1.16', range: '小于10', filename: 'HKD01_5208_B_ERME_EVT_20221102149658_V10_49', timestamp: '2022/11/02 23:36:49' }
        // ... 其他数据行
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总记录数
      sortedColumn: null,
      sortOrder: null
    }
  },
  computed: {
    filteredTableData() {
      let data = this.tableData

      // 搜索过滤
      if (this.searchText) {
        data = data.filter(item =>
          item.name.toLowerCase().includes(this.searchText.toLowerCase())
        )
      }

      // 排序
      if (this.sortedColumn) {
        data.sort((a, b) => {
          if (a[this.sortedColumn] < b[this.sortedColumn]) return this.sortOrder === 'ascending' ? -1 : 1
          if (a[this.sortedColumn] > b[this.sortedColumn]) return this.sortOrder === 'ascending' ? 1 : -1
          return 0
        })
      }

      // 分页
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.total = data.length
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return data.slice(start, end)
    },
    tableColumns() {
      return [
        { prop: 'id', label: '序号', width: '50', sortable: false },
        { prop: 'name', label: '性能名称', width: '180', sortable: true },
        { prop: 'value', label: '数值', width: '120', sortable: true },
        { prop: 'range', label: '范围', width: '150', sortable: true },
        { prop: 'filename', label: '文件名称', width: '300', sortable: false },
        { prop: 'timestamp', label: '发生时间', width: '220', sortable: true }
      ]
    }
  },
  methods: {
    tableRowClassName({ row }) {
      if (!this.isValueInRange(row.value, row.range)) {
        return 'warning-row'
      }
      return ''
    },
    isValueInRange(value, range) {
      const numberValue = parseFloat(value)
      if (range.startsWith('小于')) {
        const threshold = parseFloat(range.substring(2))
        return numberValue < threshold
      } else if (range.startsWith('大于')) {
        const threshold = parseFloat(range.substring(2))
        return numberValue > threshold
      } else if (range.startsWith('等于')) {
        const threshold = parseFloat(range.substring(2))
        return numberValue === threshold
      }
      return false // 如果范围格式不匹配，则返回false
    },
    handleSortChange({ prop, order }) {
      this.sortedColumn = prop
      this.sortOrder = order
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.currentPage = 1
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
    },
    editRow(row) {
      // 编辑逻辑
      console.log('编辑行:', row)
    },
    deleteRow(row) {
      // 删除逻辑
      console.log('删除行:', row)
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
  background-color: #f1f1f1;
}

.el-table .warning-row {
  color: red;
}

/* 可选的其他样式 */
</style>
